import { Button, Form, Modal, Progress } from "antd";
import { CommonModal } from "@/views/components/CommonModal";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { LoadingOutlined } from "@ant-design/icons";
import { useState } from "react";

/**
 *
 * @param {*} param0 options [{value,label}]
 * @returns
 */
export default ({
	visible,
	title = "正在批量更新中",
	type = "loading", // loading  转圈 | progress 进度圈

	msg = "数据提交中..",

	width = "528px",
	height = "240px",

	percent = 75,

	footer,
	skip,
	contentStyle,
	...resetProps
}) => {
	const [isCorner, setIsCorner] = useState(false);

	const SkipWaiting = ({ setIsCorner }) => {
		return (
			<>
				<Button
					type="default"
					className="height24 views-btn-ghost"
					onClick={() => {
						setIsCorner(true);
					}}
				>
					跳过等待
				</Button>
			</>
		);
	};

	const style = {
		textAlign: "center",
		position: "fixed",
		right: 0,
		bottom: 0,
		zIndex: 9999,
		background: "#fff",
		width: "200px",
		height: "32px",
		display: "flex",
		alignItems: "center",
		borderRadius: "0 0 0 0",
		padding: "0 22px"
	};
	// console.log(footer, "footer");
	// console.log(skip, "skip");
	return (
		<>
			{isCorner && visible ? (
				<div style={style}>批量修改中，请稍等....</div>
			) : (
				<CommonModal
					title={{ title }}
					open={visible}
					width={width}
					height={height}
					footer={footer ? footer : false}
					{...resetProps}
				>
					<div className="flex-column flx-center" style={contentStyle}>
						{type === "loading" && <LoadingOutlined style={{ fontSize: "80px" }} />}
						{type === "progress" && <Progress type="circle" width={80} percent={percent} style={{ marginTop: "-6px" }} />}
						{msg && (
							<Typography
								style={{
									fontSize: "14px",
									fontWeight: 400,
									letterSpacing: 0,
									color: "rgba(51,51,51,1)",
									marginTop: 16
								}}
							>
								{msg}
							</Typography>
						)}
						<div style={{ marginTop: 16, marginBottom: 15, width: "100%", textAlign: "right" }}>
							{skip && <SkipWaiting setIsCorner={setIsCorner} />}
						</div>
					</div>
				</CommonModal>
			)}
		</>
	);
};
